<template>
    <div class="con" :style="'background-image:url(' + bgimg_url + ');'">
        <div style="padding: 1px 1px;" class="father">
            <el-form
                    :rules="rules"
                    ref="loginForm"
                    v-loading="loading"
                    element-loading-text="正在登录..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    :model="loginForm"
                    class="loginContainer">
                <h3 class="loginTitle">系统登录</h3>
                <el-form-item prop="username">
                    <el-input size="normal" type="text" v-model="loginForm.userId" prefix-icon="el-icon-s-custom" auto-complete="off"
                              placeholder="请输入账号" ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input size="normal" type="password" v-model="loginForm.password" auto-complete="off"
                              placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item prop="code" >
                    <el-input size="normal" style="width:180px;text-align:left;" type="text" v-model="loginForm.code" auto-complete="off"
                              placeholder="点击图片更换验证码" @keydown.enter.native="submitLogin" ></el-input>
                    <img :src="vcUrl" @click="updateVerifyCode" alt="" style="margin:-15px;margin-left:20px; padding-left: 10px;border-radius:5%;cursor: pointer;"/>
                </el-form-item>

                <el-button size="normal" type="primary" style="width: 100%;" @click="submitLogin">登录</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
    import MY from "../../../global_variable";
    import bgimg from '@/assets/login_bg.jpeg';

    import Home from "@/view/sys/Home";

    import Doctor from "@/components/Doctor";
    import Department from "@/components/Department";
    import Project from "@/components/Project";
    import Patient from "@/components/Patient";
    import Ward from "@/components/Ward";
    import Medicine from "@/components/Medicine";
    import MedicineList from "@/components/MedicineList";
    import ProjectList from "@/components/ProjectList";
    import PatientList from "@/components/PatientList";
    import CostList from "@/components/CostList";

    export default {
        name: "Login",
        data() {
            return {
                /*背景图片*/
                bgimg_url: bgimg,
                loading: false,
                vcUrl: '',
                loginForm: {
                    userId: '',
                    password: '',
                    code:''
                },
                checked: true,
                rules: {
                    userId: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
                },
                admin: {
                        path: '/home',
                        name: '后台管理',
                        component: Home,
                        hidden: false,
                        children: [
                            {
                                path:'/doctor',
                                name:'医生管理',
                                component:Doctor,
                                hidden: false
                            },
                            {
                                path:'/department',
                                name:'科室管理',
                                component:Department,
                                hidden: false
                            },
                            {
                                path:'/project',
                                name:'项目管理',
                                component:Project,
                                hidden: false
                            },
                            {
                                path:'/patient',
                                name:'患者管理',
                                component:Patient,
                                hidden: false
                            },
                            {
                                path:'/ward',
                                name:'病房管理',
                                component:Ward,
                                hidden: false
                            },
                            {
                                path:'/medicine',
                                name:'药物管理',
                                component:Medicine,
                                hidden: false
                            },
                            {
                                path:'/medicineList',
                                name:'病人药物管理',
                                component:MedicineList,
                                hidden: false
                            },
                            {
                                path:'/projectList',
                                name:'病人检查管理',
                                component:ProjectList,
                                hidden: false
                            },
                            {
                                path:'/patientList',
                                name:'病人历史记录',
                                component:PatientList,
                                hidden: false
                            },
                            {
                                path:'/costList',
                                name:'病人费用管理',
                                component:CostList,
                                hidden: false
                            }
                        ]
                    },
                doctor:{
                    path: '/home',
                    name: '后台管理',
                    component: Home,
                    hidden: false,
                    children: [
                        {
                            path:'/medicineList',
                            name:'病人药物管理',
                            component:MedicineList,
                            hidden: false
                        },
                        {
                            path:'/patient',
                            name:'患者管理',
                            component:Patient,
                            hidden: false
                        },
                        {
                            path:'/projectList',
                            name:'病人检查管理',
                            component:ProjectList,
                            hidden: false
                        },

                    ]
                },
                nurse:{
                    path: '/home',
                    name: '后台管理',
                    component: Home,
                    hidden: false,
                    children: [
                        {
                            path:'/medicineList',
                            name:'病人药物管理',
                            component:MedicineList,
                            hidden: false
                        },

                        {
                            path:'/ward',
                            name:'病房管理',
                            component:Ward,
                            hidden: false
                        },
                        {
                            path:'/projectList',
                            name:'病人检查管理',
                            component:ProjectList,
                            hidden: false
                        },
                        {
                            path:'/patientList',
                            name:'病人历史记录',
                            component:PatientList,
                            hidden: false
                        },
                        {
                            path:'/costList',
                            name:'病人费用管理',
                            component:CostList,
                            hidden: false
                        }
                    ]
                }

            }
        },
        mounted(){
            this.updateVerifyCode()
        },
        methods: {
            updateVerifyCode() {
                console.log(MY)
                this.getRequest(MY.myURL+'/doctor/getIdentifyingCode').then(resp=>{
                    console.log(resp)
                    this.vcUrl='data:image/png;base64,'+resp.data
                }).catch(err=>{
                    console.log(err)
                })
            },
            submitLogin() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.postRequest(MY.myURL+'/doctor/login', this.loginForm).then(resp => {
                            this.loading = false;
                            if (resp.data.code == '1') {
                                console.log(resp.data)
                                let path = this.$route.query.redirect;
                                /*let kk={path: '/po',
                                        name: '登录1',
                                        component:'',
                                        hidden:false}
                                kk.component=Login
                                let oldRouter=this.$router.options.routes;
                                oldRouter[1].children.push(kk)*/
                                let oldRouter=this.$router.options.routes;
                                if(resp.data.data.role==1){
                                    oldRouter.push(this.admin)

                                }else if(resp.data.data.role==2){
                                    oldRouter.push(this.doctor)
                                }else if(resp.data.data.role==3){
                                    oldRouter.push(this.nurse)
                                }
                                sessionStorage.setItem("user",JSON.stringify(resp.data.data))
                                console.log('user :' +sessionStorage.getItem("user"))
                                this.$router.addRoutes(oldRouter)
                                let rt=this.$router.options.routes;
                                console.log(rt)
                                this.$router.replace((path == '/' || path == undefined) ? '/home' : path);
                            }else {
                                alert(resp.data.message)
                               this.updateVerifyCode();

                            }
                        })
                    } else {
                        return false;
                    }

                });
            }
        }
    }
</script>

<style scoped>
    .con{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }

    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 220px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #ffffff;
        border: 1px solid #ffffff;
    }

    .loginTitle {
        margin: 15px auto 20px auto;
        text-align: center;
        color: #505458;
    }

    .loginRemember {
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
    .el-form-item__content{
        display: flex;
        align-items: center;
    }
</style>
